<template>
  <PageContainer title="征文比赛列表">
    <div class="competition-list-container">
      <!-- 顶部操作栏：创建按钮 -->
      <div class="top-operation">
        <el-button type="primary" @click="handleCreate">
          <el-icon><Plus /></el-icon>
          新建征文
        </el-button>
      </div>
      <!-- 征文列表表格 -->
      <div class="table-section" style="margin-top: 20px">
        <el-table
          :data="competitionList"
          :loading="listLoading"
          border
          stripe
          style="width: 100%"
          :row-key="(row) => row.id"
        >
          <!-- 表格列配置：标题列新增点击事件 -->
          <el-table-column prop="title" label="比赛标题" align="left" min-width="200">
            <template #default="scope">
              <span 
                :title="scope.row.title" 
                class="title-text"
                @click="handleViewDetail(scope.row)"
                style="cursor: pointer; color: #409EFF;"
              >
                {{ scope.row.title }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="theme" label="比赛主题" align="center" width="160">
            <template #default="scope">
              {{ scope.row.theme || '无主题' }}
            </template>
          </el-table-column>
          <el-table-column label="比赛时间" align="center" width="280">
            <template #default="scope">
              <span>{{ scope.row.startDate }} 至 {{ scope.row.endDate }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="比赛状态" align="center" width="120">
            <template #default="scope">
              <el-tag
                :type="
                  scope.row.status === '进行中' ? 'primary' : 
                  scope.row.status === '已结束' ? 'danger' : 'success'
                "
              >
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="creatorName" label="创建人" align="center" width="120">
            <template #default="scope">
              {{ scope.row.creatorName || '未知' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="280" fixed="right">
            <template #default="scope">
              <!-- 切换状态按钮 -->
              <el-button
                type="success"
                size="small"
                @click="handleChangeStatus(scope.row)"
                :loading="statusChangeLoading && currentCompetitionId === scope.row.id"
                style="margin-right: 8px"
              >
                切换状态
              </el-button>
              <!-- 修改按钮 -->
              <el-button
                type="primary"
                size="small"
                @click="handleEdit(scope.row)"
                :loading="editLoading && currentCompetitionId === scope.row.id"
                style="margin-right: 8px"
              >
                编辑
              </el-button>
              <!-- 删除按钮 -->
              <el-button
                type="danger"
                size="small"
                @click="handleDelete(scope.row)"
                :loading="deleteLoading && currentCompetitionId === scope.row.id"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <div class="pagination-section" style="margin-top: 16px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
          />
        </div>
      </div>
      <!--  征文详情弹窗 -->
      <el-dialog
        v-model="detailDialogVisible"
        title="征文比赛详情"
        width="60%"
        :before-close="handleDetailDialogClose"
        :loading="detailLoading"
      >
        <div class="competition-detail">
          <div class="detail-item">
            <span class="detail-label">比赛标题：</span>
            <span class="detail-value">{{ detailData.title || '无' }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">比赛主题：</span>
            <span class="detail-value">{{ detailData.theme || '无主题' }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">比赛时间：</span>
            <span class="detail-value">{{ detailData.startDate }} 至 {{ detailData.endDate }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">比赛状态：</span>
            <el-tag
              :type="
                detailData.status === '进行中' ? 'primary' : 
                detailData.status === '已结束' ? 'danger' : 'success'
              "
            >
              {{ detailData.status }}
            </el-tag>
          </div>
          <div class="detail-item">
            <span class="detail-label">创建人：</span>
            <span class="detail-value">{{ detailData.creatorName || '未知' }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">举办平台：</span>
            <span class="detail-value">{{ detailData.platform || '无' }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">奖项设置：</span>
            <span class="detail-value">{{ detailData.awards || '无' }}</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">比赛规则：</span>
            <div class="detail-textarea">{{ detailData.rules || '无' }}</div>
          </div>
          <div class="detail-item">
            <span class="detail-label">比赛描述：</span>
            <div class="detail-textarea">{{ detailData.description || '无' }}</div>
          </div>
          <div class="detail-item" v-if="detailData.cover">
            <span class="detail-label">比赛封面：</span>
            <img :src="detailData.cover" alt="封面" class="detail-cover" />
          </div>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="detailDialogVisible = false">关闭</el-button>
          </div>
        </template>
      </el-dialog>
      <!--  修改征文抽屉 -->
      <el-drawer
        v-model="editDrawerVisible"
        title="编辑征文比赛"
        direction="rtl"
        size="60%"
        :before-close="handleDrawerClose"
        :loading="editLoading || detailLoading"
      >
        <div class="edit-competition-form">
          <el-form
            ref="editFormRef"
            :model="editForm"
            :rules="editFormRules"
            label-width="120px"
            class="form-container"
          >
            <!-- 比赛标题 -->
            <el-form-item label="比赛标题" prop="title">
              <el-input
                v-model="editForm.title"
                placeholder="请输入比赛标题"
                maxLength="100"
                show-word-limit
              />
            </el-form-item>
            <!-- 比赛主题 -->
            <el-form-item label="比赛主题" prop="theme">
              <el-input
                v-model="editForm.theme"
                placeholder="请输入比赛主题"
                maxLength="50"
                show-word-limit
              />
            </el-form-item>
            <!-- 开始日期（下拉选择年/月/日） -->
            <el-form-item label="开始日期" prop="startDate">
              <div class="date-select-group">
                <el-select
                  v-model="startYear"
                  placeholder="年"
                  style="width: 30%"
                  @change="updateStartDays"
                >
                  <el-option
                    v-for="year in yearList"
                    :key="year"
                    :label="year + '年'"
                    :value="year"
                  />
                </el-select>
                <el-select
                  v-model="startMonth"
                  placeholder="月"
                  style="width: 30%"
                  @change="updateStartDays"
                >
                  <el-option
                    v-for="month in monthList"
                    :key="month"
                    :label="month + '月'"
                    :value="month"
                  />
                </el-select>
                <el-select
                  v-model="startDay"
                  placeholder="日"
                  style="width: 30%"
                >
                  <el-option
                    v-for="day in startDayList"
                    :key="day"
                    :label="day + '日'"
                    :value="day"
                  />
                </el-select>
              </div>
            </el-form-item>
            <!-- 结束日期（下拉选择年/月/日） -->
            <el-form-item label="结束日期" prop="endDate">
              <div class="date-select-group">
                <el-select
                  v-model="endYear"
                  placeholder="年"
                  style="width: 30%"
                  @change="updateEndDays"
                >
                  <el-option
                    v-for="year in yearList"
                    :key="year"
                    :label="year + '年'"
                    :value="year"
                  />
                </el-select>
                <el-select
                  v-model="endMonth"
                  placeholder="月"
                  style="width: 30%"
                  @change="updateEndDays"
                >
                  <el-option
                    v-for="month in monthList"
                    :key="month"
                    :label="month + '月'"
                    :value="month"
                  />
                </el-select>
                <el-select
                  v-model="endDay"
                  placeholder="日"
                  style="width: 30%"
                >
                  <el-option
                    v-for="day in endDayList"
                    :key="day"
                    :label="day + '日'"
                    :value="day"
                  />
                </el-select>
              </div>
            </el-form-item>
            <!-- 比赛封面（支持预览和替换） -->
            <el-form-item label="比赛封面" prop="cover">
              <el-upload
                class="avatar-uploader"
                action="#"
                :auto-upload="false"
                :on-change="handleEditFileChange"
                :file-list="editCoverFileList"
                list-type="picture-card"
                :limit="1"
                name="cover"
              >
                <i class="el-icon-plus avatar-uploader-icon" v-if="editCoverFileList.length === 0"></i>
              </el-upload>
              <div class="upload-tip">支持JPG、PNG格式，大小不超过2MB</div>
            </el-form-item>
            <!-- 举办平台 -->
            <el-form-item label="举办平台" prop="platform">
              <el-input
                v-model="editForm.platform"
                placeholder="请输入举办平台"
                maxLength="100"
                show-word-limit
              />
            </el-form-item>
            <!-- 奖项设置 -->
            <el-form-item label="奖项设置" prop="awards">
              <el-input
                v-model="editForm.awards"
                type="textarea"
                :rows="3"
                placeholder="请输入奖项设置"
                maxLength="500"
                show-word-limit
              />
            </el-form-item>
            <!-- 比赛规则 -->
            <el-form-item label="比赛规则" prop="rules">
              <el-input
                v-model="editForm.rules"
                type="textarea"
                :rows="4"
                placeholder="请输入比赛规则"
                maxLength="2000"
                show-word-limit
              />
            </el-form-item>
            <!-- 比赛描述 -->
            <el-form-item label="比赛描述" prop="description">
              <el-input
                v-model="editForm.description"
                type="textarea"
                :rows="3"
                placeholder="请输入比赛描述"
                maxLength="1000"
                show-word-limit
              />
            </el-form-item>
            <!-- 操作按钮 -->
            <el-form-item label=" ">
              <el-button
                type="primary"
                @click="handleEditSubmit"
                :loading="editLoading"
              >
                保存修改
              </el-button>
              <el-button
                type="text"
                @click="handleDrawerClose"
                style="margin-left: 16px"
              >
                取消
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-drawer>

      <!-- 切换状态弹窗 -->
      <el-dialog
        v-model="statusChangeDialogVisible"
        title="切换比赛状态"
        width="30%"
        :before-close="handleStatusDialogClose"
        :loading="statusChangeLoading"
      >
        <div class="status-change-form">
          <el-form label-width="80px">
            <el-form-item label="当前状态">
              <el-tag
                :type="
                  currentStatus === '进行中' ? 'primary' : 
                  currentStatus === '已结束' ? 'danger' : 'success'
                "
              >
                {{ currentStatus }}
              </el-tag>
            </el-form-item>
            <el-form-item label="目标状态" prop="newStatus" :rules="[{ required: true, message: '请选择目标状态', trigger: 'change' }]">
              <el-select
                v-model="newStatus"
                placeholder="请选择目标状态"
                style="width: 100%"
              >
                <el-option
                  v-for="status in validStatusList"
                  :key="status"
                  :label="status"
                  :value="status"
                  :disabled="status === currentStatus"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <el-button @click="handleStatusDialogClose">取消</el-button>
          <el-button type="primary" @click="submitStatusChange" :loading="statusChangeLoading">确认切换</el-button>
        </template>
      </el-dialog>
    </div>
  </PageContainer>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox, ElForm, ElDialog } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
import dayjs from 'dayjs';
import PageContainer from '@/components/PageContainer.vue';
// 导入征文接口封装（新增切换状态接口）
import {
  getCompetitionList,
  updateCompetition,
  deleteCompetition,
  getCompetitionInfo,
  updateCompetitionStatus // 导入切换状态接口
} from '@/api/super';
const router = useRouter();

// ========== 列表核心数据 ==========
const competitionList = ref([]); // 征文列表数据
const listLoading = ref(false); // 列表加载状态
// 分页参数
const currentPage = ref(1);
const pageSize = ref(10);
const totalCount = ref(0);

// ========== 详情弹窗核心数据 ==========
const detailDialogVisible = ref(false); // 详情弹窗显示状态
const detailData = ref({}); // 存储详情数据
const detailLoading = ref(false); // 详情加载状态

// ========== 修改抽屉核心数据 ==========
const editDrawerVisible = ref(false); // 抽屉显示状态
const editFormRef = ref(null); // 编辑表单引用
const editLoading = ref(false); // 编辑加载状态
const currentCompetitionId = ref(''); // 当前操作的征文ID
// 编辑表单数据
const editForm = ref({
  title: '',
  theme: '',
  startDate: '',
  endDate: '',
  platform: '',
  awards: '',
  rules: '',
  description: '',
  cover: '' // 原封面路径
});
// 封面上传相关
const editCoverFileList = ref([]);
const selectedEditFile = ref(null); // 选中的新封面文件

// ========== 删除相关数据 ==========
const deleteLoading = ref(false);

// ========== 切换状态相关数据 ==========
const statusChangeDialogVisible = ref(false); // 切换状态弹窗显示
const statusChangeLoading = ref(false); // 切换状态加载
const currentStatus = ref(''); // 当前比赛状态
const newStatus = ref(''); // 目标比赛状态
const validStatusList = ref(['未开始', '进行中', '已结束']); // 合法状态列表

// ========== 日期选择器数据（下拉年/月/日） ==========
const currentYear = new Date().getFullYear();
const yearList = ref(Array.from({ length: 15 }, (_, i) => currentYear - 10 + i)); // 近10年+后5年
const monthList = ref(Array.from({ length: 12 }, (_, i) => i + 1)); // 1-12月
// 开始日期拆分
const startYear = ref('');
const startMonth = ref('');
const startDay = ref('');
const startDayList = ref([]);
// 结束日期拆分
const endYear = ref('');
const endMonth = ref('');
const endDay = ref('');
const endDayList = ref([]);

// ========== 日期选择器逻辑 ==========
// 计算当月天数（适配闰年2月）
const getDaysInMonth = (year, month) => {
  if (!year || !month) return [];
  return Array.from({ length: new Date(year, month, 0).getDate() }, (_, i) => i + 1);
};
// 更新开始日期的日列表
const updateStartDays = () => {
  startDayList.value = getDaysInMonth(startYear.value, startMonth.value);
  startDay.value = '';
};
// 更新结束日期的日列表
const updateEndDays = () => {
  endDayList.value = getDaysInMonth(endYear.value, endMonth.value);
  endDay.value = '';
};

// ========== 列表加载逻辑 ==========
// 加载征文列表
const loadCompetitionList = async () => {
  try {
    listLoading.value = true;
    const params = {
      page: currentPage.value,
      limit: pageSize.value,
      status: '' // 可根据需求添加状态筛选，如：'进行中'
    };
    const result = await getCompetitionList(params);
    if (result.data.code === '0000') {
      competitionList.value = result.data.data.list || [];
      totalCount.value = result.data.data.pagination?.total || 0;
    } else {
      ElMessage.error(result.data.msg || '获取征文列表失败');
    }
  } catch (error) {
    ElMessage.error('网络异常，获取列表失败');
    console.error('加载征文列表异常：', error);
  } finally {
    listLoading.value = false;
  }
};
// 分页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1; // 重置为第一页
  loadCompetitionList();
};
// 当前页变化
const handleCurrentChange = (val) => {
  currentPage.value = val;
  loadCompetitionList();
};

// ========== 创建按钮逻辑 ==========
const handleCreate = () => {
  // 跳转到创建征文组件（路由根据实际项目配置）
  router.push('/admin/super/createcompetition');
};

// ========== 详情弹窗逻辑 ==========
// 点击标题显示详情弹窗
const handleViewDetail = async (row) => {
  detailLoading.value = true;
  try {
    const result = await getCompetitionInfo({ id: row.id });
    if (result.data.code === '0000') {
      detailData.value = result.data.data;
      detailDialogVisible.value = true;
    } else {
      ElMessage.error(result.data.msg || '获取征文详情失败');
    }
  } catch (error) {
    ElMessage.error('获取征文详情失败');
  } finally {
    detailLoading.value = false;
  }
};
// 关闭详情弹窗
const handleDetailDialogClose = () => {
  detailDialogVisible.value = false;
};

// ========== 编辑按钮逻辑 ==========
// 打开编辑抽屉并回显数据
const handleEdit = async (row) => {
  currentCompetitionId.value = row.id;
  editDrawerVisible.value = true;
  detailLoading.value = true;
  try {
    const result = await getCompetitionInfo({ id: row.id });
    console.log('获取征文详情的完整响应：', result); // 打印响应，确认字段存在
    
    if (result.data.code === '0000') {
      const detail = result.data.data; // 后端返回的征文详情数据
      
      // 1. 回显表单基础数据（标题、主题等）
      editForm.value = {
        title: detail.title || '', // 从详情中取标题，空值兜底
        theme: detail.theme || '',
        startDate: detail.startDate || '',
        endDate: detail.endDate || '',
        platform: detail.platform || '',
        awards: detail.awards || '',
        rules: detail.rules || '',
        description: detail.description || '',
        cover: detail.cover || '' // 原封面路径
      };
      // 2. 回显“开始日期”的年/月/日下拉选择器
      if (detail.startDate) {
        const [startY, startM, startD] = detail.startDate.split('-').map(Number);
        startYear.value = startY;
        startMonth.value = startM;
        startDay.value = startD;
        startDayList.value = getDaysInMonth(startY, startM); // 同步当月天数
      }
      // 3. 回显“结束日期”的年/月/日下拉选择器
      if (detail.endDate) {
        const [endY, endM, endD] = detail.endDate.split('-').map(Number);
        endYear.value = endY;
        endMonth.value = endM;
        endDay.value = endD;
        endDayList.value = getDaysInMonth(endY, endM); // 同步当月天数
      }
      // 4. 回显“比赛封面”（若有封面则显示预览）
      editCoverFileList.value = detail.cover
        ? [
            {
              name: 'cover',
              url: detail.cover, // 后端返回的封面路径（需能访问）
              status: 'success'
            }
          ]
        : [];
    } else {
      ElMessage.error(result.data.msg || '获取征文详情失败，无法编辑');
      editDrawerVisible.value = false;
    }
  } catch (error) {
    ElMessage.error('获取征文详情失败，无法编辑');
    editDrawerVisible.value = false;
  } finally {
    detailLoading.value = false;
  }
};
// 编辑封面文件选择
const handleEditFileChange = (file, fileList) => {
  selectedEditFile.value = file.raw;
  editCoverFileList.value = fileList;
};
// 编辑表单提交
const handleEditSubmit = async () => {
  try {
    // 1. 表单校验
    await editFormRef.value.validate();
    // 2. 拼接日期字符串
    const startDate = `${startYear.value}-${startMonth.value.toString().padStart(2, '0')}-${startDay.value.toString().padStart(2, '0')}`;
    const endDate = `${endYear.value}-${endMonth.value.toString().padStart(2, '0')}-${endDay.value.toString().padStart(2, '0')}`;
    // 3. 构造提交数据（FormData支持文件）
    const formData = new FormData();
    formData.append('id', currentCompetitionId.value); // 征文ID（必传）
    formData.append('title', editForm.value.title);
    formData.append('theme', editForm.value.theme);
    formData.append('startDate', startDate);
    formData.append('endDate', endDate);
    formData.append('platform', editForm.value.platform);
    formData.append('awards', editForm.value.awards);
    formData.append('rules', editForm.value.rules);
    formData.append('description', editForm.value.description);
    // 4. 若有新封面，添加文件（无则保留原封面）
    if (selectedEditFile.value) {
      formData.append('cover', selectedEditFile.value);
    }
    // 5. 提交修改
    editLoading.value = true;
    const result = await updateCompetition(formData);
    if (result.data.code === '0000') {
      ElMessage.success('修改成功');
      editDrawerVisible.value = false;
      loadCompetitionList(); // 刷新列表
    } else {
      ElMessage.error(result.data.msg || '修改失败');
    }
  } catch (error) {
    if (error.name !== 'Error') {
      ElMessage.error('请完善表单信息');
    } else {
      ElMessage.error('网络异常，修改失败');
    }
    console.error('编辑征文异常：', error);
  } finally {
    editLoading.value = false;
  }
};
// 关闭抽屉（重置状态）
const handleDrawerClose = () => {
  editDrawerVisible.value = false;
  // 重置表单和日期选择
  if (editFormRef.value) {
    editFormRef.value.resetFields();
  }
  startYear.value = '';
  startMonth.value = '';
  startDay.value = '';
  endYear.value = '';
  endMonth.value = '';
  endDay.value = '';
  editCoverFileList.value = [];
  selectedEditFile.value = null;
  currentCompetitionId.value = '';
};

// ========== 删除按钮逻辑 ==========
const handleDelete = (row) => {
  currentCompetitionId.value = row.id;
  // 显示删除确认弹窗
  ElMessageBox.confirm(
    `确定要删除征文《${row.title}》吗？删除后不可恢复！`,
    '删除确认',
    {
      confirmButtonText: '确定删除',
      cancelButtonText: '取消',
      type: 'danger',
      draggable: true
    }
  )
    .then(async () => {
      // 确认删除
      deleteLoading.value = true;
      try {
        const result = await deleteCompetition({ id: row.id });
        if (result.data.code === '0000') {
          ElMessage.success('删除成功');
          loadCompetitionList(); // 刷新列表
        } else {
          ElMessage.error(result.data.msg || '删除失败');
        }
      } catch (error) {
        ElMessage.error('网络异常，删除失败');
        console.error('删除征文异常：', error);
      } finally {
        deleteLoading.value = false;
      }
    })
    .catch(() => {
      // 取消删除
      ElMessage.info('已取消删除');
    });
};

// ========== 切换状态逻辑 ==========
// 打开切换状态弹窗
const handleChangeStatus = (row) => {
  currentCompetitionId.value = row.id;
  currentStatus.value = row.status;
  newStatus.value = ''; // 重置目标状态
  statusChangeDialogVisible.value = true;
};
// 提交状态切换
const submitStatusChange = async () => {
  if (!newStatus.value) {
    ElMessage.warning('请选择目标状态');
    return;
  }
  if (newStatus.value === currentStatus.value) {
    ElMessage.info('目标状态与当前状态一致，无需切换');
    statusChangeDialogVisible.value = false;
    return;
  }

  try {
    statusChangeLoading.value = true;
    // 调用切换状态接口
    const result = await updateCompetitionStatus({
      competitionId: currentCompetitionId.value,
      newStatus: newStatus.value
    });
    if (result.data.code === '0000') {
      ElMessage.success(`状态已成功切换为${newStatus.value}`);
      statusChangeDialogVisible.value = false;
      loadCompetitionList(); // 刷新列表
    } else {
      ElMessage.error(result.data.msg || '状态切换失败');
    }
  } catch (error) {
    ElMessage.error('网络异常，状态切换失败');
    console.error('切换比赛状态异常：', error);
  } finally {
    statusChangeLoading.value = false;
  }
};
// 关闭切换状态弹窗
const handleStatusDialogClose = () => {
  statusChangeDialogVisible.value = false;
  newStatus.value = '';
};

// ========== 生命周期 ==========
onMounted(() => {
  // 页面挂载时加载列表
  loadCompetitionList();
});
</script>
<style lang="scss" scoped>
.competition-list-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
/* 顶部操作栏 */
.top-operation {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
}
/* 表格样式 */
.table-section {
  margin-top: 10px;
}
.title-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
}
/* 分页样式 */
.pagination-section {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
/* 编辑抽屉表单 */
.edit-competition-form {
  padding: 10px 20px;
  height: 100%;
  overflow-y: auto;
}
.form-container {
  max-width: 800px;
  margin: 0 auto;
}
/* 日期选择器组 */
.date-select-group {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
/* 封面上传 */
.avatar-uploader {
  margin-bottom: 10px;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #409eff;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
  border: 1px dashed #dcdfe6;
  border-radius: 6px;
  cursor: pointer;
}
.upload-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 8px;
}
/* 详情弹窗样式 */
.competition-detail {
  .detail-item {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
  }
  .detail-label {
    font-weight: bold;
    margin-bottom: 4px;
  }
  .detail-value {
    color: #606266;
  }
  .detail-textarea {
    color: #606266;
    white-space: pre-wrap;
    word-break: break-all;
  }
  .detail-cover {
    width: 200px;
    height: auto;
    margin-top: 8px;
  }
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
/* 切换状态弹窗样式 */
.status-change-form {
  padding: 10px 0;
}
.status-change-form .el-form-item {
  margin-bottom: 20px;
}
/* 响应式调整 */
@media (max-width: 768px) {
  .date-select-group {
    flex-direction: column;
    align-items: flex-start;
  }
  .date-select-group .el-select {
    width: 100% !important;
    margin-bottom: 8px;
  }
  .el-table__fixed-right {
    right: 0 !important;
  }
  .el-drawer.rtl, .el-dialog {
    width: 95% !important;
  }
}
</style>